package io.wongxd.demo.page.mask

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.boundsInRoot
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.wongxd.solution.weight.maskSwitch.MaskSwitchAnimModel
import io.wongxd.solution.weight.maskSwitch.MaskSwitchBox
import io.wongxd.solution.weight.maskSwitch.activeMaskView
import io.wongxd.demo.AppBtn
import io.wongxd.solution.baseView.BaseComposeToolBarFgt
import io.wongxd.solution.compose.common.HS
import io.wongxd.solution.util.statusBar


class FgtMaskSwitch : BaseComposeToolBarFgt() {
    override val title: String
        get() = "FgtMaskSwitch"

    override fun lazyInit() {

    }

    @Composable
    override fun Render() {
        val ctx = LocalContext.current
        val scope = rememberCoroutineScope()
        val lifecycleOwner = LocalLifecycleOwner.current

        var showXml by remember { mutableStateOf(false) }

        Box {

            if (showXml) XmlScreen() else ComposeScreen()

            Row(Modifier.align(Alignment.Center)) {
                AppBtn(text = if (showXml) "compose" else "xml") {
                    showXml = !showXml
                }

                HS()
            }

        }
    }


    @Composable
    fun ComposeScreen() {

        var buttonActive by remember { mutableStateOf(true) }
        var isDarkTheme by remember { mutableStateOf(false) }

        var clickX by remember { mutableStateOf(0f) }
        var clickY by remember { mutableStateOf(0f) }

        LaunchedEffect(key1 = isDarkTheme, block = {
            if (isDarkTheme) statusBar.color(android.graphics.Color.GRAY).apply() else statusBar.color(android.graphics.Color.GREEN).apply()
        })

        MaskSwitchBox(
            maskComplete = {
                buttonActive = false
            }, animFinish = {
                buttonActive = true
            }) { switchActive ->

            Box(Modifier.background(if (isDarkTheme) Color.Gray else Color.Green)) {
                LazyColumn {
                    repeat(1000) {
                        item {
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(60.dp),
                                contentAlignment = Alignment.Center
                            ) {
                                Text(text = "$it")
                            }
                        }
                    }
                }

                Box(modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(50.dp)
                    .onGloballyPositioned { coordinates ->
                        clickX = coordinates.boundsInRoot().center.x
                        clickY = coordinates.boundsInRoot().center.y
                    }) {

                    AppBtn(text = if (isDarkTheme) "toLightTheme" else "toDarkTheme") {
                        switchActive.invoke(if (isDarkTheme) MaskSwitchAnimModel.SHRINK else MaskSwitchAnimModel.EXPEND, clickX, clickY)
                        isDarkTheme = !isDarkTheme
                    }

                }
            }
        }
    }

    @Composable
    fun XmlScreen() {
        val ctx = LocalContext.current

        var buttonActive by remember { mutableStateOf(true) }
        var isDarkTheme by remember { mutableStateOf(false) }

        var clickX by remember { mutableStateOf(0f) }
        var clickY by remember { mutableStateOf(0f) }

        LaunchedEffect(key1 = isDarkTheme, block = {
            if (isDarkTheme) statusBar.color(android.graphics.Color.GRAY).apply() else statusBar.color(android.graphics.Color.GREEN).apply()
        })

        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(if (isDarkTheme) Color.Gray else Color.Green)
                    .padding(10.dp)
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 10.dp),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = "customView")
                    Button(
                        enabled = buttonActive,
                        onClick = {
                            buttonActive = false
                            ctx.activeMaskView(
                                animModel = if (isDarkTheme) MaskSwitchAnimModel.SHRINK else MaskSwitchAnimModel.EXPEND,
                                clickX = clickX,
                                clickY = clickY,
                                maskComplete = {
                                    isDarkTheme = !isDarkTheme
                                },
                                maskAnimFinish = {
                                    buttonActive = true
                                },
                            )
                        }
                    ) {
                        val tipContent = if (isDarkTheme) "ToLightTheme" else "ToDarkTheme"
                        Text(
                            text = tipContent,
                            modifier = Modifier
                                .onGloballyPositioned { coordinates ->
                                    clickX = coordinates.boundsInWindow().center.x
                                    clickY = coordinates.boundsInWindow().center.y
                                },
                        )
                    }
                }
                LazyColumn {
                    items(50) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(bottom = 10.dp)
                        ) {
                            Row(
                                Modifier
                                    .fillMaxWidth()
                                    .padding(15.dp),
                                verticalAlignment = Alignment.CenterVertically,
                                horizontalArrangement = Arrangement.SpaceBetween
                            ) {
                                Text(
                                    text = it.toString(),
                                    fontSize = 30.sp,
                                    fontWeight = FontWeight.Bold
                                )
                            }
                        }
                    }
                }
            }
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xffffffff)
    @Composable
    fun RenderPreView() {

    }
}